<template>
    <el-descriptions ref="ruleFormRef" :column="3" direction="vertical" v-loading="isLoading">

        <el-descriptions-item width="33%" label='家庭名称'>
            {{ isNullOrEmpty(formInline?.data?.familyName ?? '--') }}
        </el-descriptions-item>
        <el-descriptions-item width="33%" label='所属单位'>
            {{ isNullOrEmpty(formInline?.data?.unityName ?? '--') }}
        </el-descriptions-item>
        <el-descriptions-item width="33%" label='所属个体用户'>
            {{ isNullOrEmpty(formInline?.data?.userName ?? '--') }}
        </el-descriptions-item>
        <el-descriptions-item width="100%" label='设备信息'>
            <pure-table class="mt-5" :data="formInline?.devices" :columns="initPureTableConfig(roleTableConfig)"
                  :isShowPag="false">
                <template #commStatus="{ row }">
                    <el-tag :type="DEVICESTATUSTABLE[row.commStatus]?.type">
                        {{ isNullOrEmpty(DEVICESTATUSTABLE[row.commStatus]?.label ?? '--') }}
                    </el-tag>
                </template>
            </pure-table>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup lang="ts">
import { isNullOrEmpty, initPureTableConfig } from '@/utils/functions'
import { ref } from "vue";
import { DEVICESTATUSTABLE } from '@/constant/device-mangenment';
type FormProps = {
    formInline: any,
    isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({} as any),
    isLoading: false
});




const tableData = ref([])
const roleTableConfig = [
    { prop: 'deviceId', label: '编号', width: 100, fixed: 'left' },
    { prop: 'productName', label: '产品类型' },
    { prop: 'deviceSN', label: '设备序列号' ,showOverflowTooltip:true },
    { slot: 'commStatus', label: '设备状态', width: 100, fixed: 'right' },
]

const ruleFormRef = ref();
function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
